--绘图与滤镜全面解析

在iOS中可以很容易的开发出绚丽的界面效果，一方面得益于成功系统的设计，另一方面得益于它强大的开发框架。今天我们将围绕iOS中两大图形、图像绘图框架进行介绍：Quartz 2D绘制2D图形和Core Image中强大的滤镜功能。

在iOS中常用的绘图框架就是Quartz 2D，Quartz 2D是Core Graphics框架的一部分，是一个强大的二维图像绘制引擎。Quartz 2D在UIKit中也有很好的封装和集成，我们日常开发时所用到的UIKit中的组件都是由Core Graphics进行绘制的。不仅如此，当我们引入UIKit框架时系统会自动引入Core Graphics框架，并且为了方便开发者使用在UIKit内部还对一些常用的绘图API进行了封装。

在iOS中绘图一般分为以下几个步骤：

1.获取绘图上下文

2.创建并设置路径

3.将路径添加到上下文

4.设置上下文状态

5.绘制路径

6.释放路径

图形上下文CGContextRef代表图形输出设备（也就是绘制的位置），包含了绘制图形的一些设备信息，Quartz 2D中的所有对象最终都必须绘制到图形上下文。这样一来，我们在绘制图形时就不必关心具体的设备信息，统一了代码编写方式（在Quartz 2D中的绘图上下文可以是位图Bitmap、PDF、窗口Window、层Layer、打印对象Printer）。

在UIKit中默认已经为我们准备好了一个图形上下文对象，在UI控件的drawRect:方法（这个方法在loadView、viewDidLoad方法后执行）中我们可以通过UIKit封装函数UIGraphicsGetCurrentContext()方法获得这个图形上下文(注意在其他UI控件方法中无法取得这个对象)，然后我们只要按照绘图步骤一步步执行即可。下面自定义一个KCView继承自UIView，重写drawRect:方法绘制两条直线说明上面绘图的步骤：

KCView.m

在视图控制器创建KCView并添加到根视图中：

运行效果如下：

上面的绘图方式未免显得有些麻烦，其实Core Graphics 内部对创建对象添加到上下文这两步操作进行了封装，可以一步完成。另外前面也说过UIKit内部其实封装了一些以“UI”开头的方法帮助大家进行图形绘制。就拿前面的例子来说我们改进一些绘制方法：

上面的操作相比前面的方法应该说已经简化了不少，除了路径之外其他矩形、椭圆等都有对应的创建方法。另外上面我们也演示了封闭路径的方法，大家可以运行看一下效果。

相信大家了解了上面的绘制步骤其他图形绘制并不麻烦，下面以一个例子简单演示一下其他图形的绘制，包括文字和图像的绘制。

在下面的方法中还可以看到UIKit对绘图方法的封装，使用起来更加简单。

运行效果：

运行效果：

运行效果：

要绘制规则图形在iOS中相当简单，但是不规则图形怎么绘制呢？此时就要利用路径。前面我们绘制了直线，它和曲线绘制都属于路径绘制。和直线绘制相比曲线绘制就要复杂一些，但是路径作为高级动画的基础又是我们必须掌握的，因此这里我们就一起来熟悉一下曲线绘制。在Quartz 2D中曲线绘制分为两种：二次贝塞尔曲线和三次贝塞尔曲线。二次曲线只有一个控制点，而三次曲线有两个控制点，如下图所示：

当然，在iOS中两种曲线分别对应两种方法：

CGContextAddQuadCurveToPoint(CGContextRef c, CGFloat cpx, CGFloat cpy, CGFloat x, CGFloat y);

CGContextAddCurveToPoint(context, CGFloat cp1x, CGFloat cp1y, CGFloat cp2x, CGFloat cp2y, CGFloat x, CGFloat y);下面就演示一下这两种曲线的绘制方法

运行效果：

备注:贝塞尔曲线是由法国数学家“贝塞尔”发现的，他发现：任何一条曲线都能够由和它相切的直线的两个端点来描述，这种曲线表示方式后来被广泛应用到计算机中，称为“贝塞尔曲线”。

除了绘制图形还可以绘制文本内容。

运行效果：

Quartz 2D还可以将图像绘制到图形上下文。

运行效果：

从前面的示例中我们可以看到如何设置填充颜色，事实上很多时候纯色的填充并不能满足我们的需求，例如有时候我们要绘制一些图形可能需要设置一个漂亮的背景，这个时候我们可能就会选择渐变填充方式。Quartz 2D的渐变方式分为两种：

a.线性渐变线：渐变色以直线方式从开始位置逐渐向结束位置渐变

b.径向渐变：以中心点为圆心从起始渐变色向四周辐射，直到终止渐变色

要做渐变则必须先设置从开始位置到结束位置的渐变颜色，做过photoshop的朋友相信对于渐变色设置并不陌生，只要在指定位置指定不同的颜色，剩下的事情交给系统处理即可，如下图在起始位置、3/10位置、结束位置指定了三种颜色就形成由三种颜色组成的渐变色：

另外，在iOS中绘制渐变还需要注意一点就是指定颜色空间，所谓颜色空间就是不同颜色在不同的维度上取值最终组成一种颜色的过程。就拿RGB来说，如果将红色、绿色、蓝色看成是x、y、z轴坐标系，那么在三个坐标上分别取0~255范围内的不同值则可以组成各类颜色。当然，不同颜色空间的“坐标系”也是不同的（也就是说颜色表示的方式是不同的），常用的颜色空间除了RGB还有CMYK（印刷业常用这种颜色模式）、Gray。

在使用Quartz 2D绘图时我们的颜色除了使用常规的方法（如何前面CGContextSetRGBFillColor(CGContextRef context, CGFloat red, CGFloat green, CGFloat blue, CGFloat alpha)方法）设置RGB和透明度外，有时还会遇到颜色参数是一个数组情况。如使用颜色空间填充时用到的CGContextSetFillColor(CGContextRef context, const CGFloat *components)方法，这个时候components数组中具体是如何存储颜色就要根据颜色空间而定，如果颜色空间使用RGB则数组中的元素四个为一组，分别是red（红）、green（绿）、blue（蓝）、alpha（透明度）；如果使用CMYK颜色空间，那么数组中的元素五个为一组，分别是cyan（青）、magenta（洋红）、yellow（黄）、black（黑）、alpha（透明度）。

下面的代码分别演示了两种渐变方式，具体渐变绘制函数参数代码中已经注释的很清楚了：

运行效果：

上面我们只是绘制渐变到图形上下文，实际开发中有时候我们还需要填充对应的渐变色，例如现在绘制了一个矩形，如何填充成渐变色呢？在此可以利用渐变裁切来完成（当然利用层CALayer更加方便但这不在今天的话题讨论范围内），特别说明一下区域裁切并不仅仅适用于渐变填充，对于其他图形绘制仍然适用，并且注意裁切只能限于矩形裁切。

运行效果：

常用的图形上下文状态设置上面基本都用到了，我们不再一一解释，这里着重说一下叠加模式和填充模式，初学者对于这两个状态设置往往容易产生疑惑。

使用Quartz 2D绘图时后面绘制的图像会覆盖前面的，默认情况下如果前面的被覆盖后将看不到后面的内容，但是有时候这个结果并不是我们想要的，因此在Quartz 2D中提供了填充模式供开发者配置调整。由于填充模式类别特别多，因此下面以一个例子来说明：

运行效果：

相信大家对比代码和显示效果并不难发现每种叠加的效果。例子中只是使用UIKit的封装方法进行叠加模式设置，更一般的方法当然是使用CGContextSetBlendMode(CGContextRef context, CGBlendMode mode)方法进行设置。

前面的示例中已经演示过纯色填充、渐变填充，而有时我们需要按一定的自定义样式进行填充，这种方式有点类似于贴瓷砖的方式。我们知道如果家里贴地板或瓷砖时，通常我们会先选择一种瓷砖样式，根据房间面积我们购买不同量的瓷砖。但是不管买多少，这些瓷砖的样式都是一模一样的。填充模式就是为了达到这种效果而产生的：我们只需要绘制一个瓷砖的样式，然后让程序自动调用这种样式填充指定大小的区域。

Quartz 2D支持两种填充模式：有颜色填充和无颜色填充。两种模式使用起来区别很小，有颜色填充就是在绘制瓷砖时就指定颜色，在调用填充时就不用再指定瓷砖颜色；无颜色填充模式就是绘制瓷砖时不用指定任何颜色，在调用填充时再指定具体填充颜色。相比较无颜色填充模式而言，有颜色填充模式更加的灵活，推荐使用。

下面我们具体看一下如何按指定模式进行图形填充：

1.在使用填充模式时首先要构建一个符合CGPatternDrawPatternCallback签名的方法，这个方法专门用来创建“瓷砖”。注意：如果使用有颜色填充模式，需要设置填充色。例如我们定义一个方法drawTile绘制以下瓷砖（有颜色填充）：

2.接着需要指定一个填充的颜色空间，这个颜色空间跟前面绘制渐变的颜色空间不太一样，前面创建渐变使用的颜色空间是设备无关的，我们需要基于这个颜色空间创建一个颜色空间专门用于填充（注意对于有颜色填充创建填充颜色空间参数为NULL，不用基于设备无关的颜色空间创建）。

3.然后我们就可以使用CGPatternCreate方法创建一个填充模式，创建填充模式时需要注意其中的参数，在代码中已经做了一一解释（这里注意对于有颜色填充模式isColored设置为true，否则为false）。

4.最后调用CGContextSetFillPattern方法给图形上下文指定填充模式（这个时候注意最后一个参数，如果是有颜色填充模式最后一个参数为透明度alpa的地址，对于无颜色填充模式最后一个参数是当前填充颜色空间的颜色数组）。

5.绘制图形，这里我们绘制一个矩形。

6.释放资源。

下面是具体代码（包含两种填充模式代码，可以一一运行）

运行效果：

这里强调一点，在drawTile回调方法中不要使用UIKit封装方法进行图形绘制（例如UIRectFill等），由于这个方法由Core Graphics内部调用，而Core Graphics考虑到跨平台问题，内部是不允许调用UIKit方法的。

我们知道在UIKit开发中UIView有一个transform属性用于控件的形变，其实在绘图中我们也经常用到图形形变，这个时候可以借助图形上下文的形变方法来完成。在弄清形变之前我们要清楚图形上下文的坐标原点，因为无论是位移还是旋转都是相对于坐标原点进行的。其实Quartz 2D的坐标系同UIKit并不一样，它的坐标原点在屏幕左下方，但是为了统一编程方式，UIKit对其进行了转换，坐标原点统一在屏幕左上角。注意在设置图形上下文形变之前一定要注意保存上下文的初始状态，在使用完之后进行恢复。否则在处理多个图形形变的时候很容易弄不清楚到底是基于怎样的坐标系进行绘图，容易找不到原点（做过html5 canvas绘图的朋友对这一点应该很熟悉，在html5中绘图也经常进行状态保存和恢复）。下面通过一个图片的变换演示一下图形上下文的形变（其他图形也是一样的，就不再演示）：

最终运行效果见第四幅截图，下图描绘出了整个程序的运行过程（移动->缩放->旋转）：

在前面基本绘图部分，绘制图像时使用了UIKit中封装的方法进行了图像绘制，我们不妨看一下使用Quartz 2D内置方法绘制是什么效果。

运行效果：

看起来整个图像是倒过来的，原因正是前面说的：在Core Graphics中坐标系的y轴正方向是向上的，坐标原点在屏幕左下角，y轴方向刚好和UIKit中y轴方向相反。而使用UIKit进行绘图之所以没有问题是因为UIKit中进行了处理，事实上对于其他图形即使使用Core Graphics绘制也没有问题，因为UIKit统一了编程方式。但是使用Core Graphics中内置方法绘制图像是存在这种问题的，如何解决呢？

其实图形上下文只要沿着x轴旋转180度，然后向上平移适当的高度即可（但是注意不要沿着z轴旋转，这样得不到想要的结果）。可是通过前面介绍的CGContextRotateCTM方法只能通过沿着z轴旋转，此时不妨使用另外一种方法，那就是在y轴方向缩放-1，同样可以达到想要的效果：

在UIView的drawRect:中绘制的图形会在控件显示的时候调用（而且显示时会重绘所有图形），有时候我们希望绘制内容的显示是实时的，此时我们就需要调用绘图方法重新绘制，但是在iOS开发中不允许开发者直接调用drawRect:方法，刷新绘制内容需要调用setNeedsDisplay方法。下面以一个调整字体大小的界面演示一下视图的刷新。

KCView.h

KCView.m

KCMainViewController.m

运行效果：

前面我们也说过，Quartz 2D的图形上下方除了可以绘制到层上还可以绘制到位图、PDF等，这里我们就介绍一下如何利用Quartz 2D绘制图像到位图及PDF中。

上面的示例中一直都是在drawRect:方法中利用UIGraphicsGetCurrentContext()方法取得上下文，要得到位图或者PDF的上下文可以利用UIGraphicsBeginImageContext(CGSize size)和UIGraphicsBeginPDFPageWithInfo(CGRect bounds, NSDictionary *pageInfo)方法。位图图形上下文和PDF图形上下文UIKit是不会负责创建的，所以需要用户手动创建，并且在使用完后关闭它。在使用UIKit中系统创建的图形上下文的时候，我们只能在drawRect：方法中使用，由于这两类图形上下文是由我们手动创建的因此可以放到任何方法中调用。此外，这两个方法开启的图形上下文并没有返回值，如果我们要得到我们创建的图形上下文只要在创建上下文之后、关闭之前调用UIGraphicsGetCurrentContext()方法，此时取得的上下文即是我们自己创建的图形上下文。

下面利用位图图形上下文给一个图片添加水印，在下面的程序中我们首先创建上下文，然后在上下文中绘制图片、直线和文本，最后从当前位图上下文中取得最终形成的新图片显示到界面。

运行效果：

注意：上面这种方式绘制的图像除了可以显示在界面上还可以调用对应方法进行保存（代码注释中已经包含保存方法）；除此之外这种方法相比在drawRect：方法中绘制图形效率更高，它不用每次展示时都调用所有图形绘制方法。

绘制到PDF则要启用pdf图形上下文，PDF图形上下文的创建使用方式跟位图图形上下文是类似的，需要注意的一点就是绘制内容到PDF时需要创建分页，每页内容的开始都要调用一次IGraphicsBeginPDFPage();方法。下面的示例演示了文本绘制和图片绘制（其他图形绘制也是类似的）：

生成的pdf文档：

知识补充

1.Core Graphics是基于C语言的一套框架，开发时无法像使用Obj-C一样调用；

2.在Quartz 2D中凡是使用带有“Create”或者“Copy”关键字方法创建的对象，在使用后一定要使用对应的方法释放（由于这个框架基于C语言编写无法自动释放内存）；

3.Quartz 2D是跨平台的，因此其中的方法中不能使用UIKit中的对象（UIKit只有iOS可用），例如用到的颜色只能用CGColorRef而不能用UIColor，但是UIKit中提供了对应的转换方法；

4.在C语言中枚举一般以“k”开头，由于Quartz 2D基于C语言开发，所以它也不例外（参数中很多枚举都是k开头的）；

5.由于Quartz 2D是Core Graphics的一部分，所以API多数以CG开头；

6.在使用Quartz 2D绘图API中所有以“Ref”结尾对象，在声明时都不必声明为指针类型；

7.在使用Quartz 2D绘图API时，凡是“UI”开头的相关绘图函数，都是UIKit对Core Graphics的封装（主要为了简化绘图操作）；

利用Quartz 2D我们可以绘制各类图形、图像，功能确实强大。用过photoshop的朋友都知道，使用photoshop可以制作各种滤镜特效，那么在iOS中能否实现滤镜呢？在iOS5.0之前这些算法基本全部要靠程序员编程实现，实现过程相当复杂。从iOS5.0开始苹果官方已经提供了Core Image框架来帮助开发者进行特效制作。

先来看一下滤镜使用过程中常用的基类对象：

CIContext：图像上下文，用于管理整个图片处理过程，不同的图形上下文将利用不同的图像处理硬件进行图像处理（在iOS中可以通过不同的方式创建图像上下文，例如可以创建基于CPU的图像上下方、创建基于GPU的图像上下方以及创建OpenGL优化过的图像上下文）。

CIFilter：图像处理滤镜，每种滤镜有不同的参数设置。

CIImage：Core Image框架中的图像类型，主要用于输入和输出图像。

在使用滤镜之前我们先要弄清平台主要支持哪些滤镜，以及这些滤镜的方法和参数如何设置，此时不妨使用下面的方法进行打印查看：

在iOS7中打印会发现有127中滤镜，如果我们把每种滤镜都介绍一遍恐怕用几章内容也很难介绍详细，事实上也没有这个必要。这些滤镜使用方法是类似的，只是参数设置有所区别。在iOS文档中可以搜索“core image filter reference”一节的内容，里面有每种滤镜的详细介绍和图片使用效果。

使用Core Image框架创建滤镜效果一般分为以下几步：

1.创建图像上下文CIContext

2.创建滤镜CIFilter

3.创建过滤原图片CIImage

4.调用CIFilter的setValue： forKey：方法为滤镜指定源图片

5.设置滤镜参数【可选】

6.取得输出图片显示或保存

大家都知道在美图秀秀中有一个“增强”功能，利用它可以调整照片的饱和度、亮度、对比度，其实在Core Image中也有这样一款滤镜，下面就以颜色滤镜来演示一下Core Image中滤镜的使用。

运行效果：

再次给大家强调一下：